<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div id="myDiv">我是可爱的div</div>
    </div>
</body>
<script>
    //1,使用defineProperty进行绑定
    let obj = {
            // name: '小小香'
        }
        //为属性值改变属性
    let oldValue = 'hyx';
    Object.defineProperty(obj, 'name', {
            // writable: true,
            configurable: true,
            enumerable: true,
            //默认情况下,通过defineProperty新增的属性值是不能更改的,不能遍历,不能删除
            //设置get set访问值
            set(newValue) {
                if (newValue !== oldValue) {
                    oldValue = newValue;
                    console.log("set方法被执行了");
                }
            },
            get() {
                console.log("get方法被执行了");
                return oldValue;
            }
        })
        //添加get set
        // obj.name = '汪苏泷';
        // delete obj.name;
        // for (const key in obj) {
        //     if (obj.hasOwnProperty(key)) {
        //         const element = obj[key];
        //         console.log(element);
        //     }
        // }

    //快速监听所有属性的变化
    class Observer {
        constructor(obj) {
            this.observe(obj); //监听数据的变化
        }

        observe(obj) {

                //给对象的所有属性添加get,set方法
                if (obj && typeof obj == 'object') {
                    for (let key in obj) {
                        this.defineRecative(obj, key, obj[key])
                    }
                }
            }
            //obj对象 key需要get/set设置的属性名 value通过get/set的值
        defineRecative(obj, key, value) {
            //如果属性的取值也是一个对象,那么给这个对象也添加get/set
            this.observe(value);
            Object.defineProperty(
                obj, key, {
                    configurable: true,
                    enumerable: true,
                    //默认情况下,通过defineProperty新增的属性值是不能更改的,不能遍历,不能删除
                    //设置get set访问值
                    set: (newValue) => {
                        if (value !== newValue) {
                            //如果属性的赋值也是一个对象,那么给这个对象也添加get/set
                            this.observe(newValue);
                            value = newValue;
                            console.log("监听到数据变化 set");
                        }
                    },
                    get() {
                        return value;
                    }
                }
            )
        }
    }

    let obj2 = {
        name: '汪苏泷'
    }
    new Observer(obj2)
    console.log(obj2);
</script>

</html>